<template>
  <view class="template-reserve tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar>
	
	<text :prop="turnoptions" :change:prop="renderScript.onChange" v-show="false"></text>
	<text :prop="statusoptions" :change:prop="renderScript.checkConnectionStatus" v-show="false"></text> 
	
	<!-- <web-view :src="wvUrl" style="z-index: -999;" @message="message" id="my-webview" ref="webview"></web-view> -->
	 
    
    
    
    
    
    
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  import emoji from '@/plugins/emoji.js'
  import myVoice from '@/components/self-voice/index.vue'
  // import NextCas from "@nextcas/sdk";
  // import Record from "@nextcas/voice";
  
  const innerAudioContext = uni.createInnerAudioContext()
  const recorderManager = uni.getRecorderManager()
  var wv;
  export default {
    name: 'TemplateReserve',
    mixins: [template_page_mixin],
	components: { myVoice },
    data(){
      return {
        groupList: [
          {src: '/static/logo.png'},
          {src: '/static/logo.png'},
          {src: '/static/logo.png'},
          {src: '/static/logo.png'},
          {src: '/static/logo.png'},
          {src: '/static/logo.png'},
          {src: '/static/logo.png'},
          {src: '/static/logo.png'},
          {src: '/static/logo.png'},
          {src: '/static/logo.png'},
          {src: 'https://resource.tuniaokj.com/images/shop/cup1.jpg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/shop/watch1.jpg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
          {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
        ],
		emojis: [],
		isEdit: true,
		isFocus: false,
		showEmoji: false,
		showFile: false,
		showVoice: false,
		scrollHeight: 'auto',		// 内容区域高度
		statusBarHeight: 0,		// 状态栏高度
		scrollViewId: '',		// 滚动到最底部
		voicePlayingId: '',		// 正在播放的消息ID
		content: '',
		list: [],
		socketOpen: false,
		socketMsgQueue: [],
		fromUserId: uni.getStorageSync('userId'),
		fromUserFace: uni.getStorageSync('userFace'),
		toUserId: '',
		toUserName: '聊天室',
		tokenInfo: '',
		nextCas: '',
		record: '',
		isVideo: false,
		recording: false,
		inited: false,
		speacking: false,
		loading: true,
		wvUrl: 'http://8.130.47.242/#/activityPages/map',
		abortController: null,
		turnoptions: {},
		statusoptions: {},
		baseurl: [
		    "/work1031/",
		    "/work1032/",
		    "/work1033/",
		    "/work1034/",
		    "/work1035/",
		    "/work1036/",
		    "/work1037/",
		    "/work1038/",
		    "/work1051/",
		    "/work1052/",
		    "/work1053/",
		    "/work1054/",
		    "/work1055/",
		    "/work1056/",
		    "/work1057/",
		    "/work1058/",
		    "/work1061/",
		    "/work1062/",
		    "/work1063/",
		    "/work1064/",
		    "/work1065/",
		    "/work1066/",
		    "/work1067/",
		    "/work1068/",
		    "/work1071/",
		    "/work1072/",
		    "/work1073/",
		    "/work1074/",
		    "/work1075/",
		    "/work1076/",
		    "/work1077/",
		    "/work1078/",
		    "/work1091/",
		    "/work1092/",
		    "/work1093/",
		    "/work1094/",
		    "/work1095/",
		    "/work1096/",
		    "/work1097/",
		    "/work1098/"
		],
		apibaseurl: 'https://human.cycyai.com:8881',
		isLocked: false,
		upinfo: null,
      }
    },
	onLoad(option){
		console.log('onLoad');
		// 初始化内容高度
		
		for (let i = 0; i < this.baseurl.length; i++) {
			this.apibaseurl = 'https://human.cycyai.com:8881'+this.baseurl[i];
			try {
				const response = fetch(this.apibaseurl+'/imagehuman-kill', {
					method: 'POST',
					headers: {
					  'Content-Type': 'application/json'
					}
				  });
			} catch (error) {
				console.error('Error toggling lock:', error);
				continue;
			}
		}
				
		
	},
	onShow() {
		console.log('onShow');
		// 初始化内容高度
		// this.$Request.getApi("/module.php?m=aichat_zhushou&a=getuplist&ajax=1").then(async (res) => {
		// 	if (res.error == 0) {
		// 		this.upinfo = res.data.list[0];
		// 		for (let i = 0; i < this.baseurl.length; i++) {
		// 			if(!this.isLocked){
		// 				this.apibaseurl = 'http://220.197.166.216:8881'+this.baseurl[i];
		// 				try {
		// 					const response = await fetch(this.apibaseurl+'imagehuman-lock-client-id', {
		// 						method: 'POST',
		// 						headers: {
		// 						  'Content-Type': 'application/json'
		// 						},
		// 						body: JSON.stringify({ client_id: 'cycy_'+this.upinfo.userid.toString() })
		// 					});
											
		// 					const result = await response.json();
						  
		// 					if (result.status === 'success') {
		// 						this.isLocked = true;
		// 						this.apibaseurl = 'http://220.197.166.216:8881'+this.baseurl[i];
		// 						let date2 = {
		// 							client_id: 'cycy_'+this.upinfo.userid.toString(),
		// 							image_id: this.upinfo.image_id,
		// 						};
		// 						// let date2 = null;
		// 						this.abortController = new AbortController();
		// 						this.turnoptions = {
		// 							myDate: date2,
		// 							signal: this.abortController.signal,
		// 							url: this.apibaseurl+'imagehuman-ready-to-talk'
		// 						};
		// 						break;
		// 					} else {
		// 						// await fetch(this.apibaseurl+'imagehuman-unlock-client-id', {
		// 						// 	method: 'POST',
		// 						// 	headers: {
		// 						// 	  'Content-Type': 'application/json'
		// 						// 	},
		// 						// 	body: JSON.stringify({ client_id: 'cycy_'+this.userInfo.userid.toString() })
		// 						// });   
		// 					}
		// 				} catch (error) {
		// 					console.error('Error toggling lock:', error);
		// 				}
		// 			}
		// 		}
		// 	}
		// });
	},
	onReady() {
	   //  setTimeout(() => {
	   //    // 5秒后执行的代码
	   //    console.log('页面加载完成后5秒后执行的操作');
		  // this.nextCas.changeCamera({ x: 0, y: 1.65, z: 1.6 },{ x: 0, y: 1.61, z: 1.2 },100);
		  // this.loading = false;
	   //  }, 6000);
	},
	onHide(){
		// innerAudioContext.stop()
	},
	onBackPress(){
		if(this.showFile || this.showEmoji){
			this.showFile = false
			this.showEmoji = false
			this.setScrollHeight(0)
			return true
		}
		return false
	},
    methods: {
		acceptData(data) {
			  console.log('data:',data);
			  // some code
			  // let date2 = null;
			  if(data.type == 'success'){
				  let formData = {
				  	zsid: this.upinfo.zsid,
				  };
				  this.$Request.postApi("/module.php?m=aichat_bchat&a=upsuccess&ajax=1",formData).then((res) => {
				  		if (res.error == 0) {
				  		} else {
				  		}
				  }); 
			  }else if(data.type == 'star'){

			  }else{
				  let date = {
				  	client_id: 'cycy_'+this.upinfo.userid.toString(),
				  	image_id: this.upinfo.image_id,
				  	image_base64: this.upinfo.image_base64,
				  	image_encode: this.upinfo.image_encode,
				  };
				  // let date2 = null;
				  this.abortController = new AbortController();
				  this.statusoptions = {
				    myDate: date,
				  	signal: this.abortController.signal,
				  	url: this.apibaseurl+'imagehuman-process-to-talk'
				  };
			  }
		},
		acceptStatusData(data) {
			  console.log('StatusData:',data);
			  if(data.type == 'success'){
					let formData = {
						zsid: this.upinfo.zsid,
						status: 1,
						userid: this.upinfo.userid,
					};
					this.$Request.postApi("/module.php?m=aichat_zhushou&a=delete&ajax=1", formData).then((res) => {
							try {
								const response = fetch(this.apibaseurl+'imagehuman-unlock-client-id', {
									method: 'POST',
									headers: {
									  'Content-Type': 'application/json'
									},
									body: JSON.stringify({ client_id: 'cycy_'+this.upinfo.userid.toString() })
								}); 
							//   const response = fetch(that.apibaseurl+'/imagehuman-kill', {
							// 	method: 'POST',
							// 	headers: {
							// 	  'Content-Type': 'application/json'
							// 	}
							//   });
							
							//   if (response.ok) {
							// 	console.log('Server termination initiated');
							//   } else {
							// 	console.error('Failed to terminate server');
							//   }
							} catch (error) {
							  console.error('Error terminating server:', error);
							}
					}); 
			  }else if(data.type == 'star'){
		
			  }else{
					let formData = {
						zsid: this.upinfo.zsid,
						status: 13,
						userid: this.upinfo.userid,
					};
					this.$Request.postApi("/module.php?m=aichat_zhushou&a=delete&ajax=1", formData).then((res) => {
							try {
								const response = fetch(this.apibaseurl+'imagehuman-unlock-client-id', {
									method: 'POST',
									headers: {
									  'Content-Type': 'application/json'
									},
									body: JSON.stringify({ client_id: 'cycy_'+this.upinfo.userid.toString() })
								}); 
							//   const response = fetch(that.apibaseurl+'/imagehuman-kill', {
							// 	method: 'POST',
							// 	headers: {
							// 	  'Content-Type': 'application/json'
							// 	}
							//   });
							
							//   if (response.ok) {
							// 	console.log('Server termination initiated');
							//   } else {
							// 	console.error('Failed to terminate server');
							//   }
							} catch (error) {
							  console.error('Error terminating server:', error);
							}
					});
			  }
		},
	    message(e) {
		  //接收H5发送给app的消息      
		  // e.detail.data即为H5中uni.webView.postMessage()的data的内容
		  let mesg = e.detail.data[0]
		  console.log("mesg", mesg)
		  if (mesg.action == "开始录音") {
			  this.startVoice();
		  }
		  if (mesg.action == "结束录音") {
		  	  this.endVoice();
		  }
	  },
	  // 发送数据到webview
	  sendDataToWebView(ask) {
	    let webview = null;
	    if (uni.getCurrentPages().length > 0) {
	      const currentPage = uni.getCurrentPages()[uni.getCurrentPages().length - 1];
	      if (currentPage.route.indexOf('webview') !== -1) {
	        webview = currentPage.$scope.$getAppWebview();
	      }
	    }
	   
	    if (webview) {
	      webview.postMessage({
	        data: ask
	      });
	    }
	  },
	  evalJsInWebView() {
		  var currentWebview= this.$scope.$getAppWebview();//获取当前页面的webvie
		  setTimeout(function() {
		  	this.wv = currentWebview.children()[0]; //获取当前web-view
		  }, 200); //如页面初始化调用需要写延迟
		  if(uni.getStorageSync("makeNewAvatar")){
		  	// console.log('makeNewAvatar:',uni.getStorageSync("makeNewAvatar"));
		  	let makeNewAvatar = uni.getStorageSync("makeNewAvatar");
		  	console.log('role:',makeNewAvatar.role);
		  	console.log('timbre:',makeNewAvatar.timbre);
		  	this.wv.evalJsInWebView(
		  	  "document.dispatchEvent(new CustomEvent('getAppMsg',{detail: {role:" + makeNewAvatar.role + "}}))"
		  	)
		  	this.wv.evalJsInWebView(
		  	  "document.dispatchEvent(new CustomEvent('getAppMsg',{detail: {timbre:" + makeNewAvatar.timbre + "}}))"
		  	)
		  }
	  },
      openLocation() {
        uni.openLocation({
          longitude: 113.3298396012573,
          latitude: 22.961803525530176,
          name: '祈福新村',
          address: '祈福新村'
        })
      },
	  // 跳转
	  tn(e) {
	  	uni.navigateTo({
	  		url: e,
	  	});
	  },
	  // 初始化滚动
	  initScrollBar(){
	  	setTimeout(()=>{
	  		this.scrollViewId = ''
	  		setTimeout(()=>{
	  			this.scrollViewId = 'bottom'
	  			setTimeout(()=>{this.scrollViewId = ''}, 100)
	  		}, 100)
	  	}, 100)
	  },
	  // 监听输入聚焦
	  inputFocus(e){
	  	this.setScrollHeight(e.detail.height)
	  	this.initScrollBar()
	  	
	  	uni.onKeyboardHeightChange(res=>{
	  		this.setScrollHeight(res.height)
	  		this.initScrollBar()
	  	})
	  },
	  // 设置scroll的高度
	  setScrollHeight(descHeight=0){
	  	// #ifdef MP-WEIXIN
	  	this.scrollHeight = `calc(100vh - 110rpx - ${descHeight}px)`
	  	// #endif
	  	// #ifdef APP-PLUS
	  	this.scrollHeight = `calc(100vh - 110upx - ${descHeight}px)`
	  	// #endif
	  	// #ifdef H5
	  	this.scrollHeight = `calc(100vh - 110upx - 88rpx - ${descHeight}px)`
	  	// #endif
	  },
	  // 切换选择
	  togglePicker(height=0, type=''){
	  	this.showEmoji = false
	  	this.showFile = false
	  	let status = height >0 ? true : false
	  	
	  	switch(type){
	  		case 'emoji':
	  			this.showEmoji = status; break
	  		case 'file':
	  			this.showFile = status; break
	  	}
	  	
	  	setTimeout(()=>{
	  		this.setScrollHeight(height)
	  		this.initScrollBar()
	  	}, 50)
	  },
	  // 切换语音与编辑
	  toggleEdit(bool){
	  	this.isEdit = bool
	  	this.isFocus = bool
	  	this.setScrollHeight(0)
	  },
	  // 开始录音
	  startVoice(){
		  console.log('开始录音')
		  this.showVoice = true
		  // this.recorderManager.start()
		  // const recorderManager = uni.getRecorderManager()
		  const options = {
				//采样率
				sampleRate: 16000,
				//录音通道数
				numberOfChannels: 1,
				//编码码率
				encodeBitRate: 16,
				//音频格式
				format: 'mp3'
		}
		  recorderManager.start(options)
		  // this.record.start().then(() => {
		  //   this.recording = true;
		  // });
	  },
	  // 结束录音
	  endVoice(){
		console.log('结束录音')
	  	this.showVoice = false
		// const recorderManager = uni.getRecorderManager()
	  	recorderManager.stop()
		// this.record.stopToText({ model: "16k_zh" }).then((text) => {
		//     console.log(text);
		//   }).finally(() => {
		//     this.recording = false;
		//   });
	  },
	  // 上传
	  upload(filePath){
	  	// this.$util.loading('上传中')
	  	uni.uploadFile({
	  		url: "https://tk.cycyai.com:6501/api/core/user/upload",
	  		name: 'file',
	  		filePath,
	  		formData: {
	  			userId: "168168168"
	  		},
	  		success: res=>{
	  			uni.hideLoading()
	  			let data = JSON.parse(res.data)
	  			// this.pushMessage(data.data, 'voice')
	  		},
	  		fail: err=>{
	  			uni.hideLoading()
	  		}
	  	})
	  },
	  // 播放录音
	  playVoice(item){
	  	// if(this.voicePlayingId){
	  	// 	this.voicePlayingId = ''
	  	// }else{
	  	// 	this.voicePlayingId = item.id
	  	// 	innerAudioContext.src = item.content
	  	// 	innerAudioContext.play()
	  	// }
	  },
	  // 长按
	  longPress(msg){
		// this.record.start().then(() => {
		//   recording = true;
		// });
		
		// this.record.stopToText("16k_zh").then((text) => {
		//     console.log(text);
		//   }).finally(() => {
		//     recording = false;
		//   });
		  
	  	// let data = {
	  	// 	type: 'single',
	  	// 	source: this.fromUserId,
	  	// 	dest: this.toUserId,
	  	// 	timestamp: new Date().getTime(),
	  	// 	msg: {
	  	// 		id: msg.id,
	  	// 		fromUserId: msg.fromUserId,
	  	// 		toUserId: msg.toUserId,
	  	// 		type: 'cancel',
	  	// 		content: msg.content
	  	// 	}
	  	// }
	  	
	  	// uni.sendSocketMessage({
	  	// 	data: JSON.stringify(data),
	  	// 	success: res=>{
	  	// 		// 撤销本地消息
	  	// 		this.list = this.list.map(item=>{
	  	// 			item.type = item.id == msg.id ? 'cancel' : item.type
	  	// 			return item
	  	// 		})
	  	// 	}
	  	// })
	  },
	  // 获取位置
	  getLocation(){
	  	uni.getLocation({
	  		success: res=>{
	  			let { latitude,longitude } = res
	  			uni.chooseLocation({
	  				latitude,
	  				longitude,
	  				success: chooseRes=>{
	  					this.pushMessage(JSON.stringify(chooseRes), 'map')
	  				}
	  			})
	  		}
	  	})
	  },
	  // 打开位置
	  openLocation(content){
	  	let { latitude,longitude } = JSON.parse(content)
	  	uni.openLocation({ latitude, longitude })
	  },
	  // 发送图片
	  uploadImage(sourceType = ['album']){
	  	uni.chooseImage({
	  		sourceType,
	  		success: chooseImageRes=>{
	  			const tempFilePaths = chooseImageRes.tempFilePaths;
	  			
	  			tempFilePaths.forEach(temp=>{
	  				this.$util.loading('上传中')
	  				uni.uploadFile({
	  					url: this.$api.upload,
	  					filePath: temp,
	  					formData: {
	  						userId: this.fromUserId
	  					},
	  					name: 'file',
	  					header: this.$util.getHeader(),
	  					success: uploadRes=>{
	  						uni.hideLoading()
	  						let data = JSON.parse(uploadRes.data)
	  						this.pushMessage(data.data, 'image')
	  					},
	  					fail: err=>{
	  						uni.hideLoading()
	  					}
	  				})
	  			})
	  		}
	  	})
	  },
	  // 视频通话
	  video(){
		this.isVideo = true;
		// this.nextCas.changeCamera({ x: 0, y: 1.65, z: 0.58 },{ x: 0, y: 1.61, z: -0.45 },100);
	  },
	  close(){
		// this.nextCas.changeCamera({ x: 0, y: 1.65, z: 1.6 },{ x: 0, y: 1.61, z: 1.2 },500);
		this.isVideo = false;
	  },
	  // 发送消息
	  send(){
	  	// this.nextCas.changeCamera({ x: 0, y: 1.65, z: 1.6 },{ x: 0, y: 1.61, z: 1.2 },500);
		uni.setStorageSync('token', this.tokenInfo);
		let date = {
		    query: this.content,
		    user_uuid: "0001",
		    role: "LuXun",
		};
		this.$Request.postJson("/api/role/single", date).then((res) => {
			let date2 = {
			    text: res
			};
			this.$Request.postT("/api/core/user/tts", date2).then((res2) => {
			// this.$Request.postJsonH("/api/v1/tts", date2).then((res2) => {
				// console.log(res2);
				// res2.data.ttsInfo.replace(/\\/g, '\');
				var obj = JSON.parse(res2.data.ttsInfo);
				// console.log(obj);
				// const arrayBuffer = uni.base64ToArrayBuffer(obj.data);
				// const innerAudioContext = wx.createInnerAudioContext();
				// innerAudioContext.src = obj.data;
				// const arrayBuffer = uni.base64ToArrayBuffer('data:audio/mp3;base64,'+ obj.data);
				// innerAudioContext.play();
				// const arrayBuffer = innerAudioContext.src;
				// console.log(arrayBuffer);
				  // this.nextCas.speakByAudio(obj.data, {
				  //   onEnd: () => {
				  //     console.log("结束");
				  //   },
				  //   onStart: () => {
				  //     console.log("开始");
				  //   },
				  // });
			});
		    // console.log(res);
			// this.nextCas.speak(res, {
			//   onEnd: () => {
			//     console.log("onEnd");
			//   },
			//   onStart: () => {
			//     console.log("onStart");
			//   },
			// });
		});
	  	// this.nextCas.ask(this.content);
	  	this.content = '';
	  	this.pushMessage(this.content, 'text', ()=>{
	  		this.content = ''
	  	})
	  },
	  // 推送消息
	  pushMessage(content, type='text', cb=()=>{}){
	  	// 组合消息体：需要保存在本地数据库的数据
	  	let msgData = {
	  		fromUserId: this.fromUserId,
	  		userFace: uni.getStorageSync('userFace'),
	  		toUserId: this.toUserId,
	  		type,
	  		content
	  	}
	  	
	  	// 本地保存
	  	// uni.request({
	  	// 	method: 'POST',
	  	// 	url: this.$api.addSingleMsg,
	  	// 	data: msgData,
	  	// 	header: this.$util.getHeader(),
	  	// 	success: res=>{
	  	// 		if(res.data.code){
	  	// 			return this.$util.toast(res.data.code)
	  	// 		}
	  	// 		let msgId = res.data.data
	  			
	  	// 		// 判断是否为非文本
	  	// 		if(!['text', 'map'].includes(type)){
	  	// 			msgData.content = this.$api.staticPath + msgData.content
	  	// 		}
	  			
	  	// 		// 发送单聊消息
	  	// 		this.$xbcim.sendSingle({
	  	// 			content: msgData.content,
	  	// 			msgType: type,
	  	// 			source: this.fromUserId,
	  	// 			target: this.toUserId,
	  	// 			extra: {
	  	// 				id: msgId,
	  	// 				userFace: uni.getStorageSync('userFace')
	  	// 			}
	  	// 		})
	  			
	  	// 		// 加入信息
	  	// 		this.list.push({
	  	// 			source: this.fromUserId,
	  	// 			target: this.toUserId,
	  	// 			content: msgData.content,
	  	// 			userFace: uni.getStorageSync('userFace'),
	  	// 			type: 'single',
	  	// 			msgType: type
	  	// 		})
	  			
	  	// 		// 初始化滚动条
	  	// 		this.initScrollBar()
	  	// 		cb ? cb() : this.togglePicker(0, 'file')
	  	// 	}
	  	// })
	  },
	  // 获取记录
	  getList(){
	  	// uni.request({
	  	// 	url: this.$api.getSingleRecord,
	  	// 	data: {
	  	// 		fromUserId: this.fromUserId,
	  	// 		toUserId: this.toUserId
	  	// 	},
	  	// 	header: this.$util.getHeader(),
	  	// 	success: res=>{
	  	// 		this.list = res.data.data.map(item=>{
	  	// 			if(['voice', 'image'].includes(item.type)){
	  	// 				item.content = this.$api.staticPath+item.content
	  	// 			}
	  	// 			if(item.toUserFace){
	  	// 				item.toUserFace = this.$api.staticPath+item.toUserFace
	  	// 			}
	  				
	  	// 			// 为了和socket的字段一致，此处做一个转换；
	  	// 			// 数据表字段可以直接设置为source、target和msgType
	  	// 			item.source = item.fromUserId
	  	// 			item.target = item.toUserId
	  	// 			item.msgType = item.type
	  	// 			return item
	  	// 		})
	  			
	  	// 		this.scrollViewId = ''
	  	// 		setTimeout(()=>{
	  	// 			this.scrollViewId = 'bottom'
	  	// 			setTimeout(()=>{this.scrollViewId = ''}, 100)
	  	// 		}, 100)
	  	// 	}
	  	// })
	  }
    }
  }
</script>
<script module="renderScript" lang="renderjs">
    export default {
        methods: {
          onChange(newValue, oldValue, ownerInstance) {
			const url = 'https://human.cycyai.com:8881/work1091/imagehuman-ready-to-talk';
			let eventData = '';
			let myframe = 0;
			let prompt = '';
			let end = 0;
			if(newValue.url != ''){
				fetch(newValue.url, {
				  signal: newValue.signal,
				  method: 'POST',
				  headers: {
					'Content-Type': 'application/json'
				  },
				  body: JSON.stringify(newValue.myDate) // 将请求体转换为 JSON 字符串
				})
				.then(response => response.json())
				.then(data => {
					if (data.status === 'success') {
					  ownerInstance.callMethod('acceptData', { type: 'success'});
					} else {
					  ownerInstance.callMethod('acceptData', { type: 'error', uuid: newValue.myDate.uuid });
					}	
				  })
				.catch(error => {
				  ownerInstance.callMethod('acceptData', { type: 'error', uuid: null });
				});
				
			  }else{
				  ownerInstance.callMethod('acceptData', { type: 'star' });
			  }
		  },
		  checkConnectionStatus(newValue, oldValue, ownerInstance) {
		  	const url = 'https://human.cycyai.com:8881/work1091/imagehuman-connection-status';
		  	let eventData = '';
		  	let myframe = 0;
		  	let prompt = '';
		  	let end = 0;
		  	if(newValue.url != ''){
		  		fetch(newValue.url, {
		  		  signal: newValue.signal,
		  		  method: 'POST',
		  		  headers: {
		  			'Content-Type': 'application/json'
		  		  },
		  		  body: JSON.stringify(newValue.myDate) // 将请求体转换为 JSON 字符串
		  		})
		  		.then(response => response.json())
		  		.then(data => {
		  			if (data.status === 'success') {
		  			  ownerInstance.callMethod('acceptStatusData', { type: 'success' , data: data});
		  			} else {
		  			  ownerInstance.callMethod('acceptStatusData', { type: 'error', data: data });
		  			}	
		  		  })
		  		.catch(error => {
		  		  ownerInstance.callMethod('acceptStatusData', { type: 'error', data: data });
		  		});
		  		
		  	}else{
		  		ownerInstance.callMethod('acceptStatusData', { type: 'star' });
		  	}
		  },
        }
    }
</script>

<style lang="scss" scoped>
  .template-reserve {
  }
  /* 胶囊*/
  .tn-custom-nav-bar__back {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 1000rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 18px;
    
    .icon {
      display: block;
      flex: 1;
      margin: auto;
      text-align: center;
    }
    
    &:before {
      content: " ";
      width: 1rpx;
      height: 110%;
      position: absolute;
      top: 22.5%;
      left: 0;
      right: 0;
      margin: auto;
      transform: scale(0.5);
      transform-origin: 0 0;
      pointer-events: none;
      box-sizing: border-box;
      opacity: 0.7;
      background-color: #FFFFFF;
    }
  }
  
  page {
  	margin: 0;
  	padding: 0;
  	background: #262626;
  }
  
  .ring {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 150px;
      height: 150px;
      background: transparent;
      border: 3px solid #3c3c3c;
      border-radius: 50%;
      text-align: center;
      line-height: 150px;
      font-family: sans-serif;
      font-size: 20px;
      color: #fff000;
      letter-spacing: 4px;
      text-transform: uppercase;
      text-shadow: 0 0 10px #fff000;
      box-shadow: 0 0 20px rgba(0, 0, 0, .5);
  	
  	text {
  	    display: block;
  	    position: absolute;
  	    top: calc(50% - 2px);
  	    left: 50%;
  	    width: 50%;
  	    height: 4px;
  	    background: transparent;
  	    transform-origin: left;
  	    animation: animate 2s linear infinite;
  	}
  	
  	text:before {
  	    content: '';
  	    position: absolute;
  	    width: 16px;
  	    height: 16px;
  	    border-radius: 50%;
  	    background: #fff000;
  	    top: -6px;
  	    right: -8px;
  	    box-shadow: 0 0 20px #fff000;
  	}
  }
  
  .ring:before {
      content: '';
      position: absolute;
      top: -3px;
      left: -3px;
      width: 100%;
      height: 100%;
      border: 3px solid transparent;
      border-top: 3px solid #fff000;
      border-right: 3px solid #fff000;
      border-radius: 50%;
      animation: animateC 2s linear infinite;
  }
  
  
  
  @keyframes animateC {
      0% {
          transform: rotate(0deg);
      }
  
      100% {
          transform: rotate(360deg);
      }
  }
  
  @keyframes animate {
      0% {
          transform: rotate(45deg);
      }
  
      100% {
          transform: rotate(405deg);
      }
  }
  
  /* 用户头像 start */
  .logo-image2 {
    width: 110rpx;
    height: 110rpx;
    position: relative;
  }
  
  .logo-pic2 {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    border: 8rpx solid rgba(255,255,255,0.05);
    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    overflow: hidden;
    // background-color: #FFFFFF;
  }
  
  /* 内容*/
  .reserve{
    position: relative;
    z-index: 99;
  }
  
  .reserve-content{
    background-color: rgba(255,255,255,0.7);
    border-radius: 30rpx;
  }
  
  
  /* 标签 */
    .blogger {
      &__item {
        padding: 30rpx;
      }
      
      &__desc {
        line-height: 55rpx;
        
        &__label {
          padding: 0 20rpx;
          margin: 0rpx 18rpx 0 0;
          
          &--prefix {
            color: #00FFC8;
            padding-right: 10rpx;
          }
        }
      }
  
    }
  
  
  /* 文字截取*/
  .clamp-text-1 {
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  .clamp-text-2 {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  /* 毛玻璃*/
  .dd-glass {
     width: 100%;
     backdrop-filter: blur(20rpx);
    -webkit-backdrop-filter: blur(20rpx);
  }
  
  /* 毛玻璃*/
  .dd-glass2 {
    // width: 100%;
     backdrop-filter: blur(8rpx);
    -webkit-backdrop-filter: blur(8rpx);
  }
  
  /* 用户头像 start */
  .user-image {
    width: 70rpx;
    height: 70rpx;
    position: relative;
  }
  
  .user-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    border-radius: 100rpx;
    overflow: hidden;
    background-color: #FFFFFF;
  }
  
  /* 底部悬浮按钮 start*/
  .tn-tabbar-height {
  	min-height: 120rpx;
  	height: calc(140rpx + env(safe-area-inset-bottom) / 2);
  }
  .tn-footerfixed {
    position: fixed;
    background-color: rgba(255,255,255,0.5);
    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
    bottom: 0;
    width: 100%;
    transition: all 0.25s ease-out;
    z-index: 100;
  }
  

  /* 相册 start*/
  .slideshow {
    top: 0;
    position: fixed;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
  }
  
  .slideshow-image {
    position: absolute;
    width: 100%;
    height: 100%;
    background: no-repeat 50% 50%;
    background-size: cover;
    -webkit-animation-name: kenburns;
            animation-name: kenburns;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-duration: 16s;
            animation-duration: 16s;
    opacity: 1;
    transform: scale(1.2);
  }
  .slideshow-image:nth-child(1) {
    -webkit-animation-name: kenburns-1;
            animation-name: kenburns-1;
    z-index: 3;
  }
  .slideshow-image:nth-child(2) {
    -webkit-animation-name: kenburns-2;
            animation-name: kenburns-2;
    z-index: 2;
  }
  .slideshow-image:nth-child(3) {
    -webkit-animation-name: kenburns-3;
            animation-name: kenburns-3;
    z-index: 1;
  }
  .slideshow-image:nth-child(4) {
    -webkit-animation-name: kenburns-4;
            animation-name: kenburns-4;
    z-index: 0;
  }
  
  @-webkit-keyframes kenburns-1 {
    0% {
      opacity: 1;
      transform: scale(1.2);
    }
    1.5625% {
      opacity: 1;
    }
    23.4375% {
      opacity: 1;
    }
    26.5625% {
      opacity: 0;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(1.2);
    }
    98.4375% {
      opacity: 0;
      transform: scale(1.2117647059);
    }
    100% {
      opacity: 1;
    }
  }
  
  @keyframes kenburns-1 {
    0% {
      opacity: 1;
      transform: scale(1.2);
    }
    1.5625% {
      opacity: 1;
    }
    23.4375% {
      opacity: 1;
    }
    26.5625% {
      opacity: 0;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(1.2);
    }
    98.4375% {
      opacity: 0;
      transform: scale(1.2117647059);
    }
    100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes kenburns-2 {
    23.4375% {
      opacity: 1;
      transform: scale(1.2);
    }
    26.5625% {
      opacity: 1;
    }
    48.4375% {
      opacity: 1;
    }
    51.5625% {
      opacity: 0;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(1.2);
    }
  }
  @keyframes kenburns-2 {
    23.4375% {
      opacity: 1;
      transform: scale(1.2);
    }
    26.5625% {
      opacity: 1;
    }
    48.4375% {
      opacity: 1;
    }
    51.5625% {
      opacity: 0;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(1.2);
    }
  }
  @-webkit-keyframes kenburns-3 {
    48.4375% {
      opacity: 1;
      transform: scale(1.2);
    }
    51.5625% {
      opacity: 1;
    }
    73.4375% {
      opacity: 1;
    }
    76.5625% {
      opacity: 0;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(1.2);
    }
  }
  @keyframes kenburns-3 {
    48.4375% {
      opacity: 1;
      transform: scale(1.2);
    }
    51.5625% {
      opacity: 1;
    }
    73.4375% {
      opacity: 1;
    }
    76.5625% {
      opacity: 0;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(1.2);
    }
  }
  @-webkit-keyframes kenburns-4 {
    73.4375% {
      opacity: 1;
      transform: scale(1.2);
    }
    76.5625% {
      opacity: 1;
    }
    98.4375% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: scale(1);
    }
  }
  @keyframes kenburns-4 {
    73.4375% {
      opacity: 1;
      transform: scale(1.2);
    }
    76.5625% {
      opacity: 1;
    }
    98.4375% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: scale(1);
    }
  }
    /* 相册 end*/

    
  .tn-tabbar-height {
  	min-height: 100rpx;
  	height: calc(120rpx + env(safe-area-inset-bottom) / 2);
  }
  
  /* 用户头像 start */
  .logo-image {
    width: 80rpx;
    height: 80rpx;
    position: relative;
  }
  
  .logo-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    // box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    // overflow: hidden;
    // background-color: #FFFFFF;
  }
  
  .bg-img-cont {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 260rpx;
    width: 55vw;
    margin: 10rpx 0 0 0;
    border-radius: 12rpx;
  }
  
  /* 聊天*/
  .tnchat1{
    border-style:solid;
    border-width:71rpx;
    border-image-source: url(https://cdn.nlark.com/yuque/0/2022/png/280373/1656388937089-assets/web-upload/9d92dfd6-3486-4be9-a933-0ae160bdfc86.png);
    border-image-slice:71 71 71 71 fill;
    border-image-repeat:repeat;
    word-break: break-word;
    width: fit-content;  
  }
  .tnchat2{
    border-style:solid;
    border-width:26rpx 43rpx;
    border-image-source: url(https://cdn.nlark.com/yuque/0/2022/png/280373/1656471916508-assets/web-upload/e2305ffa-d1c7-435c-adae-2b3f0bc0da41.png);
    border-image-slice:26 43 26 43 fill;
    border-image-repeat:repeat;
    word-break: break-word;
    width: fit-content;  
  }
  
  .tnchat3{
    border-style:solid;
    border-width:26rpx 43rpx;
    border-image-source: url(https://cdn.nlark.com/yuque/0/2022/png/280373/1656562395500-assets/web-upload/2662c10c-061b-403d-9289-1165d9ee9e7b.png);
    border-image-slice:26 43 26 43 fill;
    border-image-repeat:repeat;
    word-break: break-word;
    width: fit-content;  
  }
  
  .tnchat4{
    border-style:solid;
    border-width:26rpx 43rpx;
    border-image-source: url(https://cdn.nlark.com/yuque/0/2022/png/280373/1656562336904-assets/web-upload/ad050d7f-3bdd-4de5-9e67-500f778b20e4.png);
    border-image-slice:26 43 26 43 fill;
    border-image-repeat:repeat;
    word-break: break-word;
    width: fit-content;  
  }
  
  
  .tnchat5{
    border-style:solid;
    border-width:26rpx 43rpx;
    border-image-source: url(https://cdn.nlark.com/yuque/0/2022/png/280373/1656562607434-assets/web-upload/cf008270-2a2c-4fac-82b1-b558d8a92230.png);
    border-image-slice:26 43 26 43 fill;
    border-image-repeat:repeat;
    word-break: break-word;
    width: fit-content;  
  }
  
  .tnchat6{
    border-style:solid;
    border-width:26rpx 43rpx;
    border-image-source: url(https://cdn.nlark.com/yuque/0/2022/png/280373/1656598070402-assets/web-upload/e123a1e3-6235-4d39-81d5-33d221d7a960.png);
    border-image-slice:26 43 26 43 fill;
    border-image-repeat:repeat;
    word-break: break-word;
    width: fit-content;  
  }
  
  .tnchat7{
    border-style:solid;
    border-width:26rpx 43rpx;
    border-image-source: url(https://cdn.nlark.com/yuque/0/2022/png/280373/1656602660855-assets/web-upload/9c698bba-af80-47bf-9ee4-3a78e0288fc4.png);
    border-image-slice:26 43 26 43 fill;
    border-image-repeat:repeat;
    word-break: break-word;
    width: fit-content;  
  }
  
.container{
	height: 100vh;
	overflow: hidden;
}

/* #ifdef H5 */
.container{
	height: calc(100vh);
}
/* #endif */

.status_bar,
.container,
.header,
.emoji,
.file{
	background-color: #F3F3F3;
}
.header{
	border-bottom: 2upx solid #EEE;
	
	.center{
		font-weight: bold;
	}
}
.map{
	width: 60%;
	height: 300upx;
	background-color: #FFF !important;
	
	&::before{
		border-right: 30upx solid #FFF !important;
	}
	
	.title{
		height: 80upx;
		font-size: 28upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.box{
		width: 100%;
		height: 170upx;
		margin-top: 10upx;
	}
}
.emoji{
	height: 400upx;
	padding: 0 0 20upx 20upx;
	position: relative;
	
	.list{
		width: 100%;
		height: 400upx;
		padding: 20upx 0;
		overflow-y: auto;
		
		.item{
			float: left;
			display: block;
			height: 60upx;
			line-height: 60upx;
			width: calc(100% / 12);
			margin-right: 20upx;
		}
	}
}
.file{
	padding: 30upx 20upx;
	
	.list{
		overflow: hidden;
		padding-left: 10upx;
		justify-content: flex-start;
	}
	
	.item{
		float: left;
		width: 110upx;
		height: 110upx;
		border-radius: 10upx;
		margin-right: 40upx;
		background-color: #FFF;
		
		.icon{
			width: 50upx;
		}
		
		.text{
			font-size: 24upx;
			margin-top: 4upx;
		}
	}
}
.oper{
	width: 100%;
	height: 110upx;
	padding: 0 20upx;
	// border-top: 2upx solid #EEE;
	// border-bottom: 2upx solid #EEE;
	
	.input{
		height: 68upx;
		line-height: 68upx;
		padding: 0 20upx;
		font-size: 28upx;
		border-radius: 10upx;
		background-color: #fff;
		width: calc(100% - 120upx - 20upx - 40upx - 60upx);
	}
	.icon{
		width: 60upx;
		height: 60upx;
	}
	.btn{
		color: #fff;
		width: 90upx;
		height: 52upx;
		font-size: 24upx;
		line-height: 52upx;
		text-align: center;
		border-radius: 10upx;
		background-color: #2BA245;
	}
}
.scroll{
	overflow-y: auto;
	transition: all 0.1s ease;
	height: calc(100vh - 88upx - 110upx - var(--status-bar-height));
	
	/* #ifdef MP-WEIXIN */
	height: calc(100vh - 88upx - var(--status-bar-height));
	/* #endif */
	/* #ifdef H5 */
	height: calc(100vh - 88upx - 110upx - var(--status-bar-height));
	/* #endif */
	
	.item-space{
		height: 30upx;
	}
	
	.time{
		color: #666;
		font-size: 24upx;
		text-align: center;
		margin-bottom: 20upx;
	}
	
	.cancel{
		width: 100%;
		height: 40upx;
		text-align: center;
		margin-bottom: 30upx;
		
		.text{
			color: #999;
			font-size: 24upx;
		}
	}
	
	.item{
		margin: 0 30upx 30upx;
		align-items: flex-start;
		justify-content: flex-start;
		
		.face{
			width: 80upx;
			height: 80upx;
			border-radius: 10upx;
		}
		
		.content{
			color: #000;
			font-size: 32upx;
			min-height: 80upx;
			border-radius: 10upx;
			padding: 20upx 24upx;
			background-color: #fff;
			word-break: break-all;
			word-wrap: break-word;
			max-width: calc(100% - 100upx - 120upx);
			position: relative;
			
			&::before{
				content: '';
				width: 0;
				height: 0;
				border-right: 30upx solid #FFF;
				border-top: 20upx solid transparent;
				border-bottom: 20upx solid transparent;
				position: absolute;
				top: 24upx;
			}
			
			.voice-icon{
				width: 32upx;
				height: 40upx;
				margin-right: 180upx;
				margin-bottom: -8upx;
			}
		}
		
		&.left{
			.face{
				margin-right: 30upx;
			}
			.content::before{
				left: -20upx;
			}
		}
		
		&.right{
			flex-direction: row-reverse;
			.face{
				margin-left: 30upx;
			}
			.content{
				background-color: #A0EA6F;
				
				&::before{
					right: -20upx;
					transform: rotate(180deg);
					border-right: 30upx solid #A0EA6F;
				}
				
				.voice-icon{
					margin-right: 0;
					margin-left: 180upx;
					transform: rotate(180deg);
				}
			}
		}
	}
	
	#bottom{
		height: 0;
	}
}
</style>
